<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>zz</title>
        <link rel="stylesheet" href="../../element/index.js">
    </head>
    <body>
        <div id="app">
           <!-- <cpn1 :cpnnum1=num1 @numchange="numchange"></cpn1> -->
           <!-- <h2>父组件{{num1}}</h2> -->

            <el-row v-for="(name,index) in books" v-if="index%3==0">
              <el-checkbox>{{books[index]==null?"":books[index].name}}</el-checkbox>
              <el-checkbox>{{books[index+1]==null?"":books[index+1].name}}</el-checkbox>
              <el-checkbox>{{books[index+2]==null?"":books[index+2].name}}</el-checkbox>
            </el-row>
        </div>
        <template id="cpntem">
            <div>
                <h2>{{dcpnnumber}}</h2>
                
                <!-- <input type="text" v-model="dcpnnumber"> -->
                <!-- <input type="text" :value="dcpnnumber" @input="numInput"> -->
                <input type="text" v-model="dcpnnumber">
            </div>
        </template>
        <script src="../vue.js"></script>
        <script src="../../element/index.js"></script>
        <script>
            const app = new Vue({
                el:'#app',
                data:{
                   num1:'zzz',
                   books:[{'name':"书籍1"},{'name':"书籍2"},{'name':"书籍3"},{'name':"书籍4"},{'name':"书籍5"},{'name':"书籍6"},{'name':"书籍7"},{'name':"书籍8"},{'name':"书籍9"}]
                },
                methods:{
                    numchange(value){
                        this.num1 = value+'zz'
                    }
                },
                components:{
                    cpn1:{
                        template:'#cpntem',
                        props:{
                            cpnnum1:{
                                default:2
                                }
                        },
                        data(){
                            return {
                                dcpnnumber:this.cpnnum1
                            }
                        },
                        methods:{
                            numInput(event){
                                this.dcpnnumber = event.target.value
                                this.$emit('numchange',this.dcpnnumber)
                            }
                        },
                        watch:{
                            dcpnnumber(newc,oldc){
                                this.dcpnnumber = event.target.value
                                this.$emit('numchange',this.dcpnnumber)
                            }
                        }
                    }
                        
                }
            })
        </script>
        
    </body>
</html>